<script setup lang="ts">
import noAccess from "@/assets/error/403.svg?component";
import { useMotion } from "@vueuse/motion";
const noAccessRef = ref();

const { variant } = useMotion(noAccessRef, {
  initial: {
    y: 150,
    opacity: 0,
  },
  enter: {
    y: 0,
    opacity: 1,
    transition: {
      type: "spring",
      stiffness: 350,
      damping: 50,
      delay: 150,
      onComplete: () => {
        variant.value = "levitate";
      },
    },
  },
  levitate: {
    y: 15,
    transition: {
      duration: 2000,
      repeat: Infinity,
      ease: "easeInOut",
      repeatType: "mirror",
    },
  },
});
</script>

<template>
  <div class="flex justify-center items-center h-[640px]">
    <noAccess ref="noAccessRef" />
    <div class="ml-12">
      <p
        class="font-medium text-4xl mb-4 dark:text-white"
        v-motion
        :initial="{
          opacity: 0,
          y: 100,
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 100,
          },
        }"
      >
        403
      </p>
      <p
        class="mb-4 text-gray-500"
        v-motion
        :initial="{
          opacity: 0,
          y: 100,
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 300,
          },
        }"
      >
        抱歉，你无权访问该页面
      </p>
      <el-button
        type="primary"
        @click="$router.push('/')"
        v-motion
        :initial="{
          opacity: 0,
          y: 100,
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 500,
          },
        }"
      >
        返回首页
      </el-button>
    </div>
  </div>
</template>
